<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生量化积分管理系统</title>
    <script src="./lib/tailwind@3.4.5.js"></script>
    <script type="module">
        import cfg from "./tailwind.config.js";
        tailwind.config = cfg;
    </script>
    <link rel="stylesheet" href="./lib/daisyui@4.12.13.css">
    <script src="./lib/alpinejs@3.x.x.js" defer></script>
    <script src="./lib/htmx@2.0.3.js"></script>

    <script src="./src/js/init.js"></script>
</head>
<body data-theme="lofi" class="w-screen h-screen" x-data=" page() ">
    <div class="drawer md:drawer-open">
        <input id="sidebar" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content">
          <!-- Page content here -->
            <label for="sidebar" class="btn btn-primary drawer-button md:hidden">
            Open drawer
            </label>
            
            <div id="content" class="mx-2 my-2">
                    <!-- Home -->
                <template x-if="currentTab==='home'">
                <div class="overflow-x-auto">
                    <table id="home_list" class="table table-pin-rows">
                        <thead>
                            <th>姓名</th>
                            <th>宿舍</th>
                            <th>积分</th>
                        </thead>
                        <tbody 
                        x-data="{ list: [] }" 
                        x-init="fetch('/api/student/read').then(res => res.json()).then(data => { $data.list = JSON.parse(data)})"
                        >
                        <template x-for="item in list">
                            <tr>
                                <td x-text="item.name"></td>
                                <td x-text="item.room"></td>
                                <td x-text="item.point"></td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
                </template>

                    <!-- Edit -->
                <template x-if="currentTab==='edit'">
                <div>
                    <div class="navbar flex justify-around relative z-20">
                        <div class="navbar-center flex">
                            <ul class="menu menu-horizontal px-2">
                            <li>
                                <details>
                                    <summary>学生信息</summary>
                                    <ul class="p-2">
                                        <li class="bg-gray-300"><a x-on:click="add_student_modal.showModal()">新建</a></li>
                                        <li class="bg-gray-300"><a x-on:click="import_student_modal.showModal()">导入</a></li>
                                    </ul>
                                </details>
                            </li>
                            <li>
                                <details
                                x-data=" { list: [] }"
                                x-init="fetch('/api/student/room_list').then(r => r.json()).then(data => { $data.list = JSON.parse(data) })"
                                >
                                    <summary>宿舍</summary>   
                                        <ul class="p-2">
                                            <template x-for="item in list">  
                                                <li class="bg-gray-300"><a x-text="item.room" 
                                                    x-on:click="
                                                    if ($store.EditList) {
                                                        $store.EditList.find_room(item.room);
                                                    };  
                                                ">
                                                </a></li>
                                            </template>     
                                        </ul>   
                                </details>
                            </li>
                            <li><a x-on:click=" if($store.EditList) { $store.EditList.list_api = '/api/student/read'} ">全部名单</a></li>
                            </ul>
                        </div>
                        <!-- <div class="navbar-end">
                            <div class="px-3">
                                <input id="search_student-input" type="text" placeholder="名字" class="input input-bordered w-24 h-7" />
                                <a class="btn btn-sm" x-on:click="console.log($store.EditList.list_api)">查询</a>
                            </div>
                        </div> -->
                    </div>
                    
                    <div>
                        <div class="overflow-x-auto">
                            <table class="table">
                                <!-- head -->
                                <thead>
                                <tr>
                                    <th>
                                        <!-- <input type="checkbox" class="checkbox"/> -->
                                    </th>
                                    <th>名字</th>
                                    <th>宿舍</th>
                                    <th>积分</th>
                                </tr>
                                </thead>
                                <tbody 
                                x-data="{ data: [] }" 
                                x-init="() => {
                                    if ($store.EditList) { 
                                        fetch($store.EditList.list_api)
                                            .then(r => r.json())
                                            .then(data => { $data.data = JSON.parse(data) }) 
                                    };
                                }">
                                <template x-for="item in data">
                                    <tr>
                                        <th>
                                            <!-- <input type="checkbox" class="checkbox"/> -->
                                        </th>
                                        <td>
                                            <div class="flex items-center gap-3">
                                            <div>
                                                <div class="font-bold" x-text="item.name"></div>
                                            </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge badge-ghost badge-sm" x-text="item.room"></span>
                                        </td>
                                        <td x-text="item.point"></td>
                                        <th>
                                            <button class="btn btn-ghost btn-xs" x-on:click="add_point_modal.showModal(); $store.StudentName.student_name = item.name;">加分</button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="deduct_point_modal.showModal(); $store.StudentName.student_name = item.name;">扣分</button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="edit_student_modal.showModal(); $store.StudentName.student_name = item.name;">编辑</button>
                                            <button class="btn btn-ghost btn-xs" 
                                            x-on:click="
                                            $store.StudentName.student_name = item.name;
                                            let r = confirm('确定删除吗？');
                                            if (r == true) {
                                            fetch('/api/student/delete', {
                                                method: 'POST',
                                                headers: {
                                                    'Content-Type': 'text/html'
                                                },
                                                body: item.name
                                            })
                                            } else {
                                            return
                                            }
                                            "
                                            hx-delete="/contact/1">删除</button>
                                        </th>
                                        </tr>
                                </template>
                                </tbody>
                            </table> 
                            </div>
                    </div>
                </div> 
                </template>

                    <!-- log -->
                <template x-if="currentTab==='log'">
                <div>
                    <table class="table table-xs table-pin-rows table-pin-cols">
                        <thead>
                        <tr>
                            <th></th>
                            <th>时间</th>
                            <th>内容</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody 
                        x-data="{ data: [] }" 
                        x-init="fetch('/api/log/read').then(r => r.json()).then(data => { $data.data = JSON.parse(data)})"
                        >
                        <template x-for="item in data">
                            <tr>
                                <th x-text="item.id" :key="item.id"></th>
                                <td x-text="item.time"></td>
                                <td x-text="item.content"></td>
                                <td x-text="item.describe"></td>
                                </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
                </template>

                    <!-- about -->
                <template x-if="currentTab==='about'">

                </template>
            </div>
        </div>
        <div class="drawer-side z-50">
          <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"></label>
          <ul class="menu bg-base-200 text-base-content min-h-full w-40 p-4">
              <h3 class="text-lg text-center font-bold mb-3">积分管理系统</h3>
              <!-- Sidebar content here -->
              <li><a x-on:click="currentTab = 'home'"><img src="https://pic.imgdb.cn/item/6711f8e6d29ded1a8c54fbb3.png" class="w-5 h-5" alt="">首页</a></li>
              <li><a x-on:click="currentTab = 'edit'"><img src="https://pic.imgdb.cn/item/6711f8e6d29ded1a8c54fbe6.png" class="w-5 h-5" alt="">编辑</a></li>
              <li><a x-on:click="currentTab = 'log'"><img src="https://pic.imgdb.cn/item/6711f8e6d29ded1a8c54fbc7.png" class="w-5 h-5" alt="">日志</a></li>
              <li><a x-on:click="currentTab = 'about'"><img src="https://pic.imgdb.cn/item/6711f8e6d29ded1a8c54fbd8.png" class="w-5 h-5" alt="">关于</a></li>
            </ul>
        </div>
    </div>


    <div id="modal-container">
        <!-- MODAL -->
        <!-- 添加学生信息 -->
    <dialog id="add_student_modal" class="modal">
        <div class="modal-box w-52">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-center text-xl font-bold">添加学生信息</h3>
            <hr>
            <form id="add_student_form" action="/api/student/add" method="POST" name="">
                <div class="mb-4">
                    <label class="form-label">姓名</label>
                    <input name="name" type="text" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">宿舍</label>
                    <input name="room" type="number" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">积分</label>
                    <input name="point" type="number" step="0.5" class="input input-bordered w-full">
                </div>
                <button type="submit" class="btn btn-primary w-full">创建信息</button>
            </form>

        </div>
    </dialog>

            <!-- 编辑学生信息 -->
    <dialog id="edit_student_modal" class="modal">
        <div class="modal-box w-52">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-center text-xl font-bold">编辑学生信息</h3>
            <hr>
            <form action="/api/student/edit" method="POST" name="">
                <div class="mb-4">
                    <label class="form-label">原始名字</label>
                    <input name="original_name" readonly  x-model="$store.StudentName.student_name" type="text" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">要修改的姓名</label>
                    <input name="edit_name" type="text" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">宿舍</label>
                    <input name="room" type="number" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">积分</label>
                    <input name="point" type="number" step="0.5" class="input input-bordered w-full">
                </div>
                <button type="submit" class="btn btn-primary w-full">确认编辑信息</button>
            </form>

        </div>
    </dialog>

            <!-- 加分 -->
    <dialog id="add_point_modal" class="modal">
        <div class="modal-box w-44">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <form action="/api/student/add_point" method="POST" name="">
                <div class="mb-4">
                    <label class="form-label">姓名</label>
                    <input x-model="$store.StudentName.student_name" readonly name="name" type="text" class="input input-bordered w-full h-[30px]">
                </div>
                <div class="mb-4">
                    <label class="form-label">加分</label>
                    <input name="point" type="number" step="0.5" min="0" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">描述</label>
                    <input name="describe" type="text" class="input input-bordered w-full">
                </div>
                <button type="submit" class="btn btn-primary w-full">确定</button>
            </form>
        </div>
    </dialog>

            <!-- 扣分 -->
    <dialog id="deduct_point_modal" class="modal">
        <div class="modal-box w-44">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <form action="/api/student/deduct_point" method="POST" name="">
                <div class="mb-4">
                    <label class="form-label">姓名</label>
                    <input x-model="$store.StudentName.student_name" readonly name="name" type="text" class="input input-bordered w-full h-[30px]">
                </div>
                <div class="mb-4">
                    <label class="form-label">扣分</label>
                    <input name="point" type="number" step="0.5" min="0" class="input input-bordered w-full">
                </div>
                <div class="mb-4">
                    <label class="form-label">描述</label>
                    <input name="describe" type="text" class="input input-bordered w-full">
                </div>
                <button type="submit" class="btn btn-primary w-full">确定</button>
            </form>
        </div>
    </dialog>

            <!-- 批量导入学生信息 -->
    <dialog id="import_student_modal" class="modal">
        <div class="modal-box w-96">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-center text-xl font-bold">批量导入学生信息</h3>
            <hr>
            <form action="/api/student/import" method="POST" name="">
                <div class="mb-4">
                    <label class="form-labe">姓名</label>
                    <textarea name="list" type="text" class="textarea textarea-bordered w-full h-36" placeholder="每一行输入一个姓名！"></textarea>
                </div>
                <div class="mb-4">
                    <label class="form-label">设定默认积分</label>
                    <input name="point" type="number" step="0.5" class="input input-bordered w-full" placeholder="导入的学生初始默认积分">
                </div>
                <button type="submit" class="btn btn-primary w-full">创建信息</button>
            </form>
        </div>
    </dialog>
    </div>
</body>
</html>